<%--
  Created by IntelliJ IDEA.
  User: 费阮敏
  Date: 2020/12/24
  Time: 10:02
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title></title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" type="text/css" href="/plugins/bootstrap/css/bootstrap.css">
    <link rel="stylesheet" type="text/css" href="/css/nav.css">
    <style>
        #login_div{
            /*border: 1px solid #ccc;*/

            /*设置外边距 - css - 盒子模型*/
            margin-top: 50px;

            /*内填充*/
            padding: 50px;

            /*设置边框的阴影*/

            box-shadow: 2px 0px 4px #000;

            border-radius: 15px;
        }
    </style>
</head>
<body>
<%--    jsp中包含的三个指令 - page,include,taglib--%>
<%--    可以使用jsp中的指令include指令--%>
<%@ include file="../common/nav.jsp"%>

<%--    登录表单 - begin--%>
<div class="container">
    <div class="row" id="login_div">
        <form class="form-horizontal" role="form">
            <fieldset>
                <legend>用户登录入口</legend>
                <div class="form-group has-feedback">
                    <label for="email" class="col-sm-2 control-label">邮箱</label>
                    <div class="col-sm-8">
                        <input type="email" class="form-control" id="email" placeholder="请输入邮箱">
                        <span class="glyphicon glyphicon-user form-control-feedback"></span>
                        <label id="email_label" style="display: none" class="text-danger">邮箱不存在</label>
                    </div>
                </div>
                <div class="form-group has-feedback">
                    <label for="code" class="col-sm-2 control-label">验证码</label>
                    <div class="col-sm-8">
                        <input type="text" class="form-control" id="code" placeholder="请输入验证码">
                        <span class="glyphicon glyphicon-lock form-control-feedback"></span>
                        <label id="code_label" style="display: none" class="text-danger">验证码错误</label>
                    </div>
                    <div class="col-sm-2">
                        <button type="button" onclick="sendMsg()" class="btn btn-success">发送验证码</button>
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-sm-offset-2 col-sm-10">
                        <div class="checkbox">
                            <label>
                                <input type="checkbox" id="rem">请记住我
                            </label>
                        </div>
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-sm-offset-2 col-sm-10">
                        <%--                            一定要设置成普通按钮--%>
                        <button type="button" onclick="login()" class="btn btn-default">登录</button>
                    </div>
                </div>
            </fieldset>
        </form>
    </div>
</div>
<%--    登录表单end--%>


<script src="/plugins/jquery/jquery.min.js"></script>
<script src="/plugins/bootstrap/js/bootstrap.js"></script>
<script>

    $(function(){
        //等DOM元素全部加载完毕之后,会执行此处的代码...
        //从本地存储中根据key将email获取出来
        let email = localStorage.getItem("email");

        //放入到input标签中
        let email_input = document.getElementById("email");
        email_input.value = email;
    })

    function logins(){
        //获取记住密码的控件
        let ck = document.getElementById("rem");
        //判断是否记住我
        if(ck.checked){
            //将邮箱中的输入的数据进行保存
            //h5 - 本地存储
            let value = document.getElementById("email").value;

            localStorage.setItem("email",value);
        }else{
            //清除保存邮箱
            localStorage.removeItem("email");
        }
    }

    //发送验证码的功能
    function sendMsg(){
        //获取邮箱值
        //jquery的写法 - js的框架
        let value = $("#email").val();
        alert(value);
        //进行一个非空判断...
        if(value.length == 0){
            alert("sorry,email must be not null");
        }else{
            //发送邮箱到后台...
            //window.location="/mvc/user/send?email="+value;

            //ajax方式进行发送...
            $.get("/user/send","email="+value,function(result){
                //此处的result是后台返回给页面的数据 - json数据
                console.log(result);

                if(result.code == 404){
                    alert(result.msg);
                }else {
                    alert("验证码已经发送到您的邮箱!请你查收!");
                }
            });
        }
    }

    //登录按钮的功能
    function login(){

        logins();

        let email = $("#email").val();

        let code = $("#code").val();

        document.getElementById("email_label").style.display="none";
        document.getElementById("code_label").style.display="none";

        //json数据
        $.post("/user/logincl",{email:email,code:code},function(result){
            if(result.code==404){
                document.getElementById("email_label").style.display="";
            }else if(result.code == 500){
                document.getElementById("code_label").style.display="";
            }else{
                //登录成功... 跳转到首页...
                window.location="/product/index";
                //window.location="/mvc/product/ajax";
            }
        });


    }
    </script>
</body>
</html>